<template>
    <div ref="parent" @mouseenter="enter" @mouseleave="leave"

    class="loop-scroll">
        <div ref="loop" class="loop" v-for="item in length" :style="{ 'animation-duration': duration + 's' }">
            <slot></slot>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue';

const props = withDefaults(defineProps<{
    speed?: number
   
}>(), {
  
    speed: 20
})
const isHover = ref(false)
const length = ref(2)
const parent = ref<HTMLElement>()
const duration = ref(30)
const loop = ref<HTMLElement[]>()
onMounted(() => {

    return
    setTimeout(() => {
        start()
    }, 500)

})

const start = () => {
    let parentHeight = parent.value!.clientHeight
        let childHeight = loop.value![0].offsetHeight
        duration.value = (childHeight * 2) / props.speed

        if(parentHeight > childHeight){
            length.value = 1
            for(let item of loop.value!){
                item.classList.remove('loop')
            }
        }
}

const enter = () => {
    console.log('enter....')
    isHover.value = true
}

const leave = () => {
    console.log('leave....')
    isHover.value = false
}

defineExpose({
    start,
})
</script>
<style scoped>
.loop-scroll {
    overflow-y: hidden;
}

.loop-scroll:hover .loop {
    animation-play-state: paused;
}

.loop {
    animation: scroll 10s linear infinite;
}

@keyframes scroll {
    0% {
        transform: translateY(0%);
    }

    100% {
        transform: translateY(-100%);
    }
}
</style>
